<template>
    <div>
        <el-card>
            <h2>数据总览</h2>
            <div>
                <div style="display:flex;flex-wrap: wrap;">
                <el-card  style="width:14%;margin:10px;" shadow  v-for="staticData in dataSumViewList" :key="staticData.serverName">
                    <div slot="header">
                    <span v-if="staticData.serverName == '访问次数'" style="color:#409EFF" > <i class="el-icon-view"></i> {{staticData.serverName}}</span>
                    <span v-if="staticData.serverName == '用户总人数'"  style="color:#409EFF"> <i class="el-icon-user"></i> {{staticData.serverName}}</span>
                    <span v-if="staticData.serverName == '角色总数'" style="color:#409EFF"> <i class="el-icon-magic-stick"></i> {{staticData.serverName}}</span>
                    <span v-if="staticData.serverName == '房源总数'" style="color:#409EFF"> <i class="el-icon-office-building"></i> {{staticData.serverName}}</span>
                    <span v-if="staticData.serverName == '合同总数'" style="color:#409EFF"> <i class="el-icon-document-copy"></i> {{staticData.serverName}}</span>
                    <span v-if="staticData.serverName == '微服务调用次数'" style="color:#409EFF"> <i class="el-icon-data-line"></i> {{staticData.serverName}}</span>
                    </div>
                    <div  class="text item">
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '访问次数'">{{staticData.count}}次</span>
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '用户总人数'">{{staticData.count}}人</span>
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '角色总数'">{{staticData.count}}个</span>
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '房源总数'">{{staticData.count}}套</span>
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '合同总数'">{{staticData.count}}份</span>
                    <span style="color: brown;margin-left:35px" v-if="staticData.serverName == '微服务调用次数'">{{staticData.count}}次</span>
                    </div>
                </el-card>
                </div>
            </div>

            <h2>数据图表</h2>
             <el-row>
                <el-col :span="12"><div id="login_log_last_7_day" style="height:400px;"/></el-col>
                <el-col :span="12"><div id="user_summary" style="height:400px;"/></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div id="house_summary" style="height:400px;"/></el-col>
                <el-col :span="12"><div id="promise_summary" style="height:400px;"/></el-col>
            </el-row>
            <el-row>
                <el-col :span="12"><div id="server_summary" style="height:400px;"/></el-col>
            </el-row>


          </el-card>

    </div>
    
</template>
<script>
import * as echarts from 'echarts';

export default {
   name: 'Home',
   data() {
       return{
           dataSumViewList:[],
           totalData: [],
           LastOneWeekLoginDataVO: {},
           userSummaryStaticVO: {},
           houseSummaryStaticVO: {},
           promiseSummaryStaticVO: {},
           serverUseStaticVO: {}

       }
   },
   created() {
     this.getStaticData();
   },
   methods: {

      //获取静态数据入口
       async getStaticData() {
           const{data: res} = await this.$http.get('/user/static/all-data')
           console.log(res.data)
           this.totalData = res.data.data
           this.LastOneWeekLoginDataVO = res.data.data.lastOneWeekLoginDataVO;
           this.userSummaryStaticVO = res.data.data.userSummaryStaticVO;
           this.houseSummaryStaticVO = res.data.data.houseSummaryStaticVO;
           this.promiseSummaryStaticVO = res.data.data.promiseSummaryStaticVO;
           this.serverUseStaticVO = res.data.data.serverUseStaticVO;
           console.log("res----->" + res.data.data.serverUseStaticVO)
           this.setDataSumViewList();
           this.getLoginLogLast7Days();
           this.getUserSummaryData();
           this.getHouseSummary();
           this.getPromiseSummary();
           this.getServerSummary();

       },

       //数据总览封装
       setDataSumViewList() {
           this.dataSumViewList.push({serverName: '访问次数',count: this.totalData.siteVisitCount});
           this.dataSumViewList.push({serverName: '用户总人数',count: this.totalData.userCount});
           this.dataSumViewList.push({serverName: '角色总数',count: this.totalData.roleCount});
           this.dataSumViewList.push({serverName: '房源总数',count: this.totalData.houseCount});
           this.dataSumViewList.push({serverName: '合同总数',count: this.totalData.promiseCount});
           this.dataSumViewList.push({serverName: '微服务调用次数',count: this.totalData.serverCount});
       },

       //获取最近7天的登录人数
       getLoginLogLast7Days() {
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById("login_log_last_7_day"))
           var option = {
               title: {
                    text: '最近一周访问量曲线图'
                },
                xAxis: {
                    type: 'category',
                    data: this.LastOneWeekLoginDataVO.week
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.LastOneWeekLoginDataVO.counts,
                    type: 'line'
                }]
            };

             // 使用刚指定的配置项和数据显示图表。
           myChart.setOption(option)

       },

       //获取用户统计数据
       getUserSummaryData() {
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById("user_summary"));
           var option = {
                title: {
                    text: '用户统计树状图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.userSummaryStaticVO.roles,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '25%',
                        data: this.userSummaryStaticVO.counts
                    }
                ]
            };

            myChart.setOption(option)

       },

       //获取房源统计数据
       getHouseSummary() {
           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById("house_summary"));

           var option = {
                title: {
                    text: '房源统计柱状图'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: this.houseSummaryStaticVO.houseStatus,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: '25%',
                        data: this.houseSummaryStaticVO.counts
                    }
                ]
            };

            myChart.setOption(option)

       },

       getPromiseSummary() {
           let staticData = [];

           //数据组装
           for(var i = 0;i < this.promiseSummaryStaticVO.promiseStatus.length;i++) {
               staticData.push({value: this.promiseSummaryStaticVO.counts[i], 
               name: this.promiseSummaryStaticVO.promiseStatus[i] + " " + this.promiseSummaryStaticVO.counts[i]})
           }

           // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById("promise_summary"));
           var option = {
               title: {
                    text: '合约统计饼状图'
                },
                legend: {
                    top: 'bottom'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                series: [
                    {
                        name: '面积模式',
                        type: 'pie',
                        radius: [30, 150],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 3
                        },
                        data: staticData
                    }
                ]
            };
            myChart.setOption(option);


       },

       getServerSummary() {
           let staticData = [];
           console.log(this.serverUseStaticVO)
           for(var i = 0;i < this.serverUseStaticVO.serverNames.length;i++) {
               staticData.push({value: this.serverUseStaticVO.counts[i], name: this.serverUseStaticVO.serverNames[i]});
           }
         

            // 基于准备好的dom，初始化echarts实例
           var myChart = echarts.init(document.getElementById("server_summary"));
           var option = {
                // backgroundColor: '#2c343c',

                title: {
                    text: '微服务调用次数统计',
                },

                tooltip: {
                    trigger: 'item'
                },

                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        name: '微服务',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: staticData.sort(function (a, b) { return a.value - b.value; }),
                        roseType: 'radius',
                        label: {
                            color: 'brown'
                        },
                        labelLine: {
                            lineStyle: {
                                color: 'brown'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        },
                        itemStyle: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                            return Math.random() * 200;
                        }
                    }
                ]
            };
             // 使用刚指定的配置项和数据显示图表。
           option && myChart.setOption(option);
       }
       
   }    
}
</script>

<style scoped>
.f{
    color: brown;
}

</style>